import { useState } from "react";
import "./style.less";

interface IProp {
  title: string;
  list: KeyMap[];
  onChange: (value: string) => void;
}

export default function List({ title, list, onChange }: IProp) {
  const [cur, setCur] = useState(0);
  const listClick = (active: number) => {
    setCur(active);
    onChange(list[active].value);
  };

  return (
    <div className="list">
      <h4>{title}</h4>
      <ul>
        {list.map((item, index) => (
          <li
            onClick={() => listClick(index)}
            key={index}
            className={index === cur ? "active" : ""}
          >
            {item.key}
          </li>
        ))}
      </ul>
    </div>
  );
}
